<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example illustrates how to enable the jQuery Grid Grouping functionality.</title>
    <link rel="stylesheet" href="/static/jqwidgets/styles/jqx.base.css" type="text/css" />
	<script src="/static/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="/static/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="/static/jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="/static/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="/static/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="/static/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="/static/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="/static/jqwidgets/jqxgrid.grouping.js"></script>
    <script type="text/javascript" src="/static/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="/static/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript">


        $(document).ready(function () {

	// Need to include this for CSRF token to work with Jeditable.js
	$.ajaxSetup({ 
	     beforeSend: function(xhr, settings) {
		 function getCookie(name) {
		     var cookieValue = null;
		     if (document.cookie && document.cookie != '') {
			 var cookies = document.cookie.split(';');
			 for (var i = 0; i < cookies.length; i++) {
			     var cookie = jQuery.trim(cookies[i]);
			     // Does this cookie string begin with the name we want?
			 if (cookie.substring(0, name.length + 1) == (name + '=')) {
			     cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
			     break;
			 }
		     }
		 }
		 return cookieValue;
		 }
		 if (!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url))) {
		     // Only send the token to relative URLs i.e. locally.
		     xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
		 }
	     } 
	});

	// Needed for serialising the form data
	$.fn.serializeObject = function()
	{
	    var o = {};
	    var a = this.serializeArray();
	    $.each(a, function() {
		if (o[this.name] !== undefined) {
		    if (!o[this.name].push) {
			o[this.name] = [o[this.name]];
		    }
		    o[this.name].push(this.value || '');
		} else {
		    o[this.name] = this.value || '';
		}
	    });
	    return o;
	};



            // prepare the data grid
	    var data = {{ json|safe }};
            var source =
            {
                localdata: data,
                datatype: "array"
            };
            $("#jqxgrid").jqxGrid(
            {
                height: 500,
		width: 900,
                source: source,
                groupable: true,
                columns: [
                  { text: 'Plate name', datafield: 'pname' },
                  { text: 'cell line', datafield: 'cell' },
                  { text: 'library', datafield: 'lib' },
                  { text: 'concentration', datafield: 'conc' },
                  { text: 'condition', datafield: 'cond' },
                  { text: 'replicate', datafield: 'repl' },
                ],
                groups: ['cond']
            });

	    $("#jqxgrid").jqxGrid({selectionmode: 'checkbox'});

	    $("#getformbutton").jqxButton({
		height: 30});
	    $("#smbbutton").jqxButton({
		height: 30});

	    $('#getformbutton').click(function () {
		var action_selected = $('input[name="action"]:checked').val()

		if ( action_selected!=null){
 
		$.get( "/actions/", { action:action_selected })
		  .done(function( act_form ) {
			     $( "form" ).empty().append( act_form ); 
			        });
		
		} else {alert("please an action");}
		});
	      
	    $('#smbbutton').click(function () {
			    
                var rows = $("#jqxgrid").jqxGrid('selectedrowindexes');
		var action_selected = $('input[name="action"]:checked').val()

		if (rows.length>0 && action_selected!=null){

                var selectedRecords = [];
                for (var m = 0; m < rows.length; m++) {
                    var row = $("#jqxgrid").jqxGrid('getrowdata', rows[m]);
		    selectedRecords[selectedRecords.length] = row;}
                
		$.post( "/actions/", { action: action_selected, setting: JSON.stringify($('form').serializeObject()), plates: JSON.stringify(selectedRecords) })
		  .done(function( txt ) {
			     alert(txt);
			        });
		
		} else {alert("please select plates and action");}

	    });

	    
		
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid"></div>
	{{ form.as_p }}
    <input type="button" style="margin: 10px;" id="getformbutton" value="Get action setting" />
    <div id="action_form"></div>
	<form>
	</form>
    <input type="button" style="margin: 10px;" id="smbbutton" value="Perform action on selected plates" />
    </div>
</body>
</html>
